body {
  margin: 0;
  padding: 0;
  font-family: "Micorsoft YaHei", "微软雅黑";
}
.bg-animation {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, #7540e8, #a0ece3);
}
.bg-animation .square,
.bg-animation .circle,
.bg-animation .triangle {
  list-style: none;
}
.bg-animation .square li,
.bg-animation .circle li,
.bg-animation .triangle li {
  position: absolute;
  bottom: 0;
}
.bg-animation .square h3,
.bg-animation .circle h3,
.bg-animation .triangle h3 {
  background: #fff;
}
.bg-animation .square li {
  animation: square 6s linear infinite;
  opacity: 0;
}
.bg-animation .square li:nth-child(1) {
  top: 40vh;
  left: 95vw;
  animation-delay: 0s;
}
.bg-animation .square li:nth-child(1) h3 {
  height: 45px;
  width: 45px;
}
.bg-animation .square li:nth-child(2) {
  top: 20vh;
  left: 70vw;
  animation-delay: .5s;
}
.bg-animation .square li:nth-child(2) h3 {
  height: 55px;
  width: 55px;
}
.bg-animation .square li:nth-child(3) {
  top: 10vh;
  left: 45vw;
  animation-delay: 1.5s;
}
.bg-animation .square li:nth-child(3) h3 {
  height: 60px;
  width: 60px;
}
.bg-animation .square li:nth-child(4) {
  top: 2vh;
  left: 25vw;
  animation-delay: 2s;
}
.bg-animation .square li:nth-child(4) h3 {
  height: 40px;
  width: 40px;
}
.bg-animation .square li:nth-child(5) {
  top: 40vh;
  left: 5vw;
  animation-delay: .5s;
}
.bg-animation .square li:nth-child(5) h3 {
  height: 50px;
  width: 50px;
}
.bg-animation .circle li {
  animation: circle 6s linear infinite;
  opacity: 0;
}
.bg-animation .circle li h3 {
  border-radius: 50%;
}
.bg-animation .circle li:nth-child(1) {
  top: 30vh;
  left: 80vw;
  animation-delay: 0s;
}
.bg-animation .circle li:nth-child(1) h3 {
  height: 40px;
  width: 40px;
}
.bg-animation .circle li:nth-child(2) {
  top: 0;
  left: 60vw;
  animation-delay: .6s;
}
.bg-animation .circle li:nth-child(2) h3 {
  height: 70px;
  width: 70px;
}
.bg-animation .circle li:nth-child(3) {
  top: 50vh;
  left: 35vw;
  animation-delay: 1.5s;
}
.bg-animation .circle li:nth-child(3) h3 {
  height: 50px;
  width: 50px;
}
.bg-animation .circle li:nth-child(4) {
  top: 65vh;
  left: 15vw;
  animation-delay: 2s;
}
.bg-animation .circle li:nth-child(4) h3 {
  height: 30px;
  width: 30px;
}
.bg-animation .circle li:nth-child(5) {
  top: 5vh;
  left: 1vw;
  animation-delay: 0s;
}
.bg-animation .circle li:nth-child(5) h3 {
  height: 55px;
  width: 55px;
}
.bg-animation .triangle li {
  animation: triangle 6s linear infinite;
  opacity: 0;
}
.bg-animation .triangle li div {
  width: 0;
  height: 0;
  border: 40px solid;
  border-color: transparent transparent #fff;
}
.bg-animation .triangle li:nth-child(1) {
  top: 55vh;
  left: 75vw;
  animation-delay: 0s;
}
.bg-animation .triangle li:nth-child(1) div {
  border: 30px solid;
  border-color: transparent transparent #fff  ;
}
.bg-animation .triangle li:nth-child(2) {
  top: 25vh;
  left: 50vw;
  animation-delay: .6s;
}
.bg-animation .triangle li:nth-child(2) div {
  border: 50px solid;
  border-color: transparent transparent #fff transparent;
}
.bg-animation .triangle li:nth-child(3) {
  top: 60vh;
  left: 25vw;
  animation-delay: 1.5s;
}
.bg-animation .triangle li:nth-child(3) div {
  border: 25px solid;
  border-color: transparent transparent transparent #fff;
}
.bg-animation .triangle li:nth-child(4) {
  top: 25vh;
  left: 17vw;
  animation-delay: 2s;
}
.bg-animation .triangle li:nth-child(4) div {
  border: 40px solid;
  border-color: #fff  transparent transparent transparent ;
}
.bg-animation .triangle li:nth-child(5) {
  top: 18vh;
  left: 4vw;
  animation-delay: 0s;
}
.bg-animation .triangle li:nth-child(5) div {
  border: 35px solid;
  border-color: transparent  transparent #fff  ;
}
@keyframes square {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotateY(1000deg);
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes triangle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -180px;
  margin-left: -265px;
  width: 530px;
  height: 360px;
}
.content .animation:before {
  content: "Animation";
}
.content .layout:before {
  content: "Layout";
}
.content .project:before {
  content: "Project";
}
.common {
  top: 50%;
  left: 50%;
  margin: 30px 0;
  padding: 0;
  display: flex;
  width: 530px;
  height: 80px;
}
.common:before {
  position: absolute;
  width: 530px;
  height: 80px;
  background: linear-gradient(45deg, #6e3ee8, #8dc2d7);
  border-radius: 40px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-size: 30px;
  transition: 0.5s;
  z-index: 1;
}
.common li {
  position: absolute;
  list-style: none;
  transition: 1s;
}
.common li a {
  display: block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #262626;
  color: #fff;
  margin: 0 10px;
  border-radius: 50%;
  font-size: 14px;
  transition: 1s;
  text-decoration: none;
}
.common li:nth-child(1) a {
  background: #21b41e;
}
.common li:nth-child(2) a {
  background: #55acee;
}
.common li:nth-child(3) a {
  background: #dd4b39;
}
.common li:nth-child(4) a {
  background: #0077b5;
}
.common li:nth-child(5) a {
  background: #d4bc24;
}
.ul-common:hover:before {
  width: 76px;
  height: 76px;
  line-height: 76px;
  font-size: 14px;
  font-weight: 900;
  color: #141414;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5), inset 0 -2px 2px #000000, inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 0 0 6px #465497;
}
.ul-common:hover li:nth-child(1) a {
  transform: translateX(80px) rotate(360deg);
  transition-delay: 0.8s;
}
.ul-common:hover li:nth-child(2) a {
  transform: translateX(170px) rotate(360deg);
  transition-delay: 0.6s;
}
.ul-common:hover li:nth-child(3) a {
  transform: translateX(260px) rotate(360deg);
  transition-delay: 0.4s;
}
.ul-common:hover li:nth-child(4) a {
  transform: translateX(350px) rotate(360deg);
  transition-delay: 0.2s;
}
.ul-common:hover li:nth-child(5) a {
  transform: translateX(440px) rotate(360deg);
  transition-delay: 0s;
}
